<template>
  <template v-if="visible">
    <Teleport to="body">
      <div class="lc-dialog-overlay" @click="onClickOverLay"></div>
      <div class="lc-dialog-wrapper">
        <div class="lc-dialog">
          <header>
            <sapn v-if="title"> {{ title }} </sapn>
            <slot v-else name="title"></slot>
            <span class="lc-dialog-close" @click="close"></span></header>
          <main>
            <!--          <p>第一行字</p>-->
            <!--          <p>第二行字</p>-->
            <slot name="content"></slot>
          </main>
          <footer>
            <Button level="main" @click="query">OK</Button>
            <Button @click="cancel">Cancel</Button>
          </footer>
        </div>
      </div>
    </Teleport>

  </template>
</template>

<script lang="ts">
  import Button from './Button/Button.vue'
  export default {
    name: 'LcDialog',
    components: {
      Button
    },
    props: {
      title: {
        type: String
      },
      visible: { // visible属性控制是否打开弹窗
        type: Boolean,
        default: false
      },
      closeOnClickOverlay: { // 是否点击遮罩层关闭弹窗
        type: Boolean,
        default: true
      },
      cancel: {
        type: Function
      },
      query: {
        type: Function
      }
    },
    setup(props, context){
      // close方法
      const close = ()=>{
        context.emit('update:visible', false)
      }
      // 点击遮罩层方法
      const onClickOverLay = ()=>{
        if(props.closeOnClickOverlay){
          close()
        }
      }
      // 确定方法
      const query = ()=>{
        // props.query && props.query !== false 等价于 props.query?.()
        if(props.query && props.query !== false){
          close()
        }
      }
      // 取消方法
      const cancel = ()=>{
        if(props.query && props.query !== false){
          close()
        }
      }
      return { close, onClickOverLay, query, cancel }
    }
  }
</script>
<style lang="scss">
  $radius: 4px;
  $border-color: #d9d9d9;
  .lc-dialog {
    background: white;
    border-radius: $radius;
    box-shadow: 0 0 3px fade_out(black, 0.5);
    min-width: 15em;
    max-width: 90%;
    &-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: fade_out(black, 0.5);
      z-index: 100;
    }
    &-wrapper {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 101;
    }
    >header {
      padding: 12px 16px;
      border-bottom: 1px solid $border-color;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 20px;
    }
    >main {
      padding: 12px 16px;
    }
    >footer {
      border-top: 1px solid $border-color;
      padding: 12px 16px;
      text-align: right;
    }
    &-close {
      position: relative;
      display: inline-block;
      width: 16px;
      height: 16px;
      cursor: pointer;
      &::before,
      &::after {
        content: '';
        position: absolute;
        height: 1px;
        background: black;
        width: 100%;
        top: 50%;
        left: 50%;
      }
      &::before {
        transform: translate(-50%, -50%) rotate(-45deg);
      }
      &::after {
        transform: translate(-50%, -50%) rotate(45deg);
      }
    }
  }
  </style>
